<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="../js/day.js"></script>
    </head>
    <body>
        <!-- 过滤器：
    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
    语法：
        1.注册过滤器：Vue.filter（name,callback）或new Vue{filters:{}}
        2.使用过滤器：{{xxx丨过滤器名}}或v-bind：属性="xxx丨过滤器名"
    备注：
        1.过滤器也可以接收额外参数、多个过滤器也可以串联
        2.并没有改变原本的数据，是产生新的对应的数据 -->
        <div id="root">
            <h2>{{time}}</h2>
            <h2>{{fmtTime}}</h2>
            <h2>{{getFmtTime()}}</h2>
            <h2>{{time | timeFormater}}</h2>
            <h2>{{time | timeFormater('YYYY_MM_DD')}}</h2>
            <!-- 多级管道 -->
            <h2>{{time | timeFormater('YYYY_MM_DD')| mySlice}}</h2>
            <!-- v-bind也可以 -->
            <h3 :x="msg |mySlice">hello11111</h3>

        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false
            //全局过滤器,vue实例,组件间共享
            Vue.filter('myFilter',function(value){
                console.log('aaa')
                return value
            })

            new Vue({
                el:'#root' ,
                data:{
                    time:1758588908864,
                    msg:'hello world',

                },
                methods:{
                    getFmtTime(){
                        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')

                    }
                },
                computed:{
                    fmtTime(){
                        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    }
                },
                //局部过滤器 
                filters:{
                    //es6的形参默认值
                    //第一个值是管道前的值,第二个值是参数,不写的话就默认第一个
                    timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                        return dayjs(value).format(str)
                    },
                    mySlice(value){
                        return value.slice(0,4)
                    }
                }

            })

        </script>
    </body>
</html> 